<template>
  <by-background />

  <view class="flex-column height-max">
    <by-navigation-bar title="积分记录" />

    <view class="flex-item flex-column padding-top-20 padding-lr-20">
      <view v-if="list.length" class="flex-item page bg-white padding-lr-30 padding-tb-10">
        <view v-for="(item,index) in list" :key="index" class="list-item padding-tb-40 flex-row align-center justify-between color-t1">
          <view class="flex-column">
            <text class="text-30 margin-bottom-26">{{ item.accountTitle }}</text>
            <text class="text-26">{{ item.createTime }}</text>
          </view>
          <text class="text-30">{{item.direction === 'D' ? '+' : '-' }}{{item.point}}</text>
        </view>
        <by-load-footer :has-more="hasMore" text="加载中..." />
      </view>

      <by-nodata v-else />
    </view>
  </view>

</template>

<script setup lang="ts">
import { getPointList } from '@/common/api'
import { GetList } from '@/common/util'
import type { AnyObject } from '@/common/types'

const hasMore = ref(true)
const list = shallowRef<AnyObject[]>([])
const getList = new GetList(getPointList, {}, (res:AnyObject) => res.records)
async function reload() {
  list.value = await getList.reload()
  hasMore.value = getList._has_more
}
async function nextPage() {
  hasMore.value = getList._has_more
  list.value.push(...await getList.nextPage())
  triggerRef(list)
}
reload()
onPullDownRefresh(reload)
onReachBottom(nextPage)
</script>

<style scoped lang="scss">
@include setMargin(bottom, 26);

.height-max{
  min-height: 100vh;
}

.page{
  border-radius: 16rpx 16rpx 0 0;

  .list-item{
    border-top:2rpx solid $color-border;

    &:first-child{
      border:none;
    }

  }

}
</style>
